<template>
  <div class="app-container">
    <div v-if="!detailVisible">
      <div style="margin-bottom: 20px">
        <el-input v-model="form.name" style="width: 200px;margin-right: 20px" clearable placeholder="请输入模板名称" />
        <el-select v-model="form.frequency" placeholder="任务频次" clearable>
          <el-option
            v-for="val in options"
            :key="val.value"
            :label="val.label"
            :value="val.value"
          />
        </el-select>
        <el-button type="primary" style="margin-left: 40px" @click="setResult">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <div class="header">
          <el-button type="primary" icon="el-icon-plus" @click="Edit({})">新建模板</el-button>
          <!-- <div>
            <i class="el-icon-refresh" @click="fetchData" />
            <i class="el-icon-setting" @click="setColumns" />
          </div> -->
        </div>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="模板编号" prop="id" sortable />
        <el-table-column v-if="showColumn('name')" label="任务模板名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('frequency')" label="任务频次" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.frequency == 'monthly' ? '按月' : '一次性' }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('pageviews')" label="数据模板">
          <template slot-scope="scope">
            {{ scope.row.sheet_template.name }}
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('updated_at')" prop="updated_at" label="更新时间">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time" /> -->
            <span>{{ getTimeFormate(scope.row.updated_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('status')" class-name="status-col" label="操作" width="260" align="center">
          <template slot-scope="scope">
            <el-tag style="cursor: pointer" @click="handleDetaile(scope.row)">详情</el-tag>
            <el-tag style="margin: 0 10px;cursor: pointer" @click="Edit(scope.row)">编辑</el-tag>
            <el-tag style="margin-right: 10px;cursor: pointer" @click="publish(scope.row)">发布</el-tag>
            <el-tag style="cursor: pointer" type="danger" @click="Delete(scope.row)">删除</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :limit="10" :background="false" :page="currentPage" @pagination="handleCurrentChange" @pageSize="handleSizeChange" />
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in columns" :key="item.value" :label="item.value">{{ item.text }}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmPopover">确 定</el-button>
        </span>
      </el-dialog>
      <Edit v-if="editVisible" :item="item" :edit-visible="editVisible" @changeResult="changeResult" />
      <Delete v-if="deleteVisible" :item="deleteItem" :delete-visible="deleteVisible" @deleteResult="deleteResult" />

    </div>
    <Detail v-if="detailVisible" :item="item" @goBack="goBack" />
  </div>
</template>

<script>
import moment from 'moment'
import { getTaskList, taskManualPublish } from '@/api/table'
import Edit from './Edit.vue'
import Delete from './delete.vue'
import Detail from './detail.vue'
export default {
  components: {
    Edit,
    Delete,
    Detail
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSizes: 10,
      total: 0,
      checkList: [],
      item: {},
      deleteItem: {},
      form: {
        name: '',
        frequency: ''
      },
      dialogVisible: false,
      editVisible: false,
      deleteVisible: false,
      detailVisible: false,
      options: [{
        value: 'monthly',
        label: '按月'
      }, {
        value: 'once',
        label: '一次性'
      }],
      value: '',
      columns: [
        { text: '模板名称', value: 'name', show: true },
        { text: '任务频次', value: 'frequency', show: true },
        { text: 'Pageviews', value: 'pageviews', show: true },
        { text: 'Status', value: 'status', show: true },
        { text: '更新时间', value: 'updated_at', show: true }
      ],
      listLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTaskList({ ...this.form, page: this.currentPage, per_page: this.pageSizes }).then(response => {
        this.list = response.data
        this.total = response.pagination.total
        this.currentPage = response.pagination.current_page
        console.log(response.data, '------------------response.data')
        this.listLoading = false
      })
    },
    setResult() {
      this.currentPage = 1
      this.fetchData()
    },
    getTimeFormate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    goBack() {
      this.detailVisible = false
    },
    handleCurrentChange(val) {
      this.currentPage = val.page
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSizes = val.limit
      this.fetchData()
    },
    handleDetaile(row) {
      this.item = row
      this.detailVisible = true
    },
    Edit(row) {
      this.editVisible = true
      this.item = row
    },
    publish(row) {
      taskManualPublish({ id: row.id }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
        }
        console.log(res, '------------------res')
      })
    },
    Delete(row) {
      this.deleteItem = row
      this.deleteVisible = true
    },
    changeResult(data) {
      this.editVisible = false
      if (data) {
        this.fetchData()
      }
    },
    deleteResult() {
      this.deleteVisible = false
      this.fetchData()
    },
    reset() {
      this.form = {
        name: '',
        frequency: ''
      }
      this.currentPage = 1
      this.fetchData()
    },
    setColumns() {
      this.dialogVisible = true
      this.checkList = []
      this.columns.map(item => {
        if (item.show) {
          this.checkList.push(item.value)
        }
      })
      // 重新渲染表格
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout()
      })
    },

    confirmPopover() {
      if (this.checkList.length === 0) {
        this.$message({
          message: '请选择需要展示的表格字段',
          center: true,
          customClass: 'message-error'
        })
        return
      }
      // 根据选择结果，遍历修改列是否展示的属性值
      this.columns.forEach(item => {
        if (this.checkList.some(el => el == item.value)) {
          item.show = true
        } else {
          item.show = false
        }
      })
      this.dialogVisible = false
      // this.$refs.tablePopover.doClose();
      // 重新渲染表格
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout()
      })
    },
    showColumn(currentColumn) {
      return this.columns.find(item => item.value === currentColumn).show
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-icon-refresh {
    font-size: 20px;
    margin-right: 30px;
    cursor: pointer;
  }
  .el-icon-setting {
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
